<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>flex布局实际案例</title>
	<style type="text/css" media="screen">
		*{padding: 0;margin: 0;}
		.Site{
			display: flex;display: -webkit-flex;min-height: 100vh;flex-direction: column;
		}
		header,footer{
			min-height: 5vh;
			background-color: #666666;
		}
		.Site-content{
			display: flex;
			flex: 1;
		}
		.HolyGrail-content {
		  	flex: 1;
			background-color: #D6D6D6;
		}
		.HolyGrail-nav{
			background-color: #77BBDD;
		}
		.HolyGrail-ads{
			background-color: #F63;
		}
		.HolyGrail-nav, .HolyGrail-ads {
		  /* 两个边栏的宽度设为12em */
		  flex: 0 0 12rem;
		}
		.HolyGrail-nav {
		  /* 导航放到最左边 */
		  order: -1;
		}
		@media (max-width: 768px) {
		  .Site-content {
		    flex-direction: column;
		    flex: 1;
		  }
		  .HolyGrail-nav,
		  .HolyGrail-ads,
		  .HolyGrail-content {
		    flex: auto;
		  }
		}

		.Media {
		  display: flex;
		  align-items: flex-start;
		}
		.Media-figure {
		  margin-right: 1rem;
		}
		.Media-body {
		  flex: 2;
		}

		.InputAddOn {
		  display: flex;
		}
		.InputAddOn-field {
		  flex: 1;
		}
	</style>
</head>
<body class="Site">
  <header>...</header>
  <main class="Site-content">
	<main class="HolyGrail-content">
		<div class="Media">
		  <img class="Media-figure" src="./images/1.jpg" alt="">
		  <p class="Media-body">Media-bodyMedia-bodyMedia-bodyMedia-bodyMedia-bodyMedia-bodyMedia-bodyMedia-bodyMedia-bodyMedia-bodyMedia-bodyMedia-bodyMedia-bodyMedia-body</p>
		</div>
	</main>
    <nav class="HolyGrail-nav">...</nav>
    <aside class="HolyGrail-ads">
	    <div class="InputAddOn">
		  <span class="InputAddOn-item">Amount</span>
		  <input class="InputAddOn-field">
		  <button class="InputAddOn-item">confirm</button>
		</div>
	</aside>
  </main>
  <footer>...</footer>
</body>
</html>